<template>
  <div class="numberAn">
    <transition-group name="number" tag="p">
      <p class="numberAn-p" v-for="(item, index) in numberArr" :key="index + 1">{{item}}</p>
    </transition-group>
  </div>
</template>

<script>
  export default {
    name: 'zz-numberAn',
    data () {
      return {
        numberArr: []
      }
    },
    props: {
      number: {
        type: Number,
        default: 0
      }
    },
    watch: {
      number (value, old) {
        const length = this.numberArr.length
        const variate = value - old
        this.numberArr.splice(length - variate, 1)
        this.$nextTick(() => {
          this.numberArr = this.digitize(value)
        })
      }
    },
    mounted () {
      this.initNumber(this.number)
    },
    methods: {
      initNumber (n) {
        this.numberArr = this.digitize(n)
      },
      digitize (n) {
        let arr = []
        for (let codePoint of `${n}`) {
          arr.push(parseInt(codePoint))
        }
        return arr
      }
    }
  }
</script>

<style lang="scss">
  .numberAn{
    display: inline-block;
    vertical-align: top;
    .numberAn-p{
      float: left;
    }
  }
  .number-enter-to {
    transition: all 1s ease;
    transform: translateY(0);
  }
  .number-leave-active {
    transition: all 1s ease;
    transform: translateY(50%)
  }
  .number-enter {
    opacity: 0;
    transform: translateY(-50%)
  }
  .number-leave {
    transform: translateX(0)
  }
</style>
